<template>
  <div id='ground' :style='size'>
    <chart ref='chart1' :options='options' :style='size' :auto-resize='true'></chart>
  </div>
</template>

<script>
  import getcolor from '../js/getColor'
  export default {
    name: 'pie',
    data () {
      return {
        options: {},
        aqi: '',
        size: {
          width: '100%',
          height: '100%'
        },
        unit: '',
        title: ''
      }
    },
    props: {
      valuenum: String
    },
    watch: {
      valuenum () {
        this.aqi = this.valuenum
        this.options.series[0].data[0].value = this.aqi
        this.options.series[0].axisLine.color[0] = [parseInt(this.aqi) / 500, getcolor.getColor(parseInt(this.aqi), 'AQI')]
      }
    },
    methods: {
    },
    computed: {},
    mounted () {
      this.aqi = this.valuenum
      this.options = {
        title: {
          x: 'center',
          y: '60%', // title：pm的位置
          textStyle: { // 设置主标题风格
            'fontSize': 13,
            color: '#3B4049',
            fontFamily: '微软雅黑'
          }
        },
        tooltip: {
          formatter: '{a} <br/>{b} : {c}' + this.unit
        },
        toolbox: {
          show: false,
          feature: {
            mark: {
              show: true
            },
            restore: {
              show: true
            },
            saveAsImage: {
              show: true
            }
          }
        },
        grid: {
          top: '0%',
          left: '0%',
          right: '0%',
          bottom: '0%',
          containLabel: true
        },
        series: [{
          center: ['50%', '50%'],
          number: [0, '50%'],
          startAngle: 230, // 仪表盘起始角度
          endAngle: -50, // 仪表盘结束角度
          splitNumber: 10, // 分割段数
          name: this.title,
          type: 'gauge',
          radius: '85%',
          axisLine: { // 坐标轴线
            lineStyle: { // 属性lineStyle控制线条样式
              color: [
                [parseInt(this.aqi) / 500, getcolor.getColor(parseInt(this.aqi), 'AQI')],
                [1, '#cacaca']
              ],
              width: 8
            }
          },
          axisTick: { // 坐标轴小标记
            splitNumber: 10, // 每份split细分多少段
            length: 12, // 属性length控制线长
            lineStyle: { // 属性lineStyle控制线条样式
              color: 'auto'
            },
            show: false
          },
          axisLabel: { // 坐标轴文本标签，详见axis.axisLabel
            textStyle: { // 其余属性默认使用全局文本样式，详见TEXTSTYLE
              color: 'auto'
            },
            show: false
          },
          splitLine: { // 分隔线
            show: true, // 默认显示，属性show控制显示与否
            length: 22, // 属性length控制线长
            lineStyle: { // 属性lineStyle（详见lineStyle）控制线条样式
              color: 'auto'
            }
            // show: false
          },
          pointer: { // 指针粗细
            width: 0
          },
          title: {
            textStyle: { // 其余属性默认使用全局文本样式，详见TEXTSTYLE
              fontWeight: 'bolder',
              color: 'white'
            },
            'show': true,
            'offsetCenter': [0, '70%'], // 调整“优良...”的位置，前面为左右，后面为上下
            'padding': [5, 10],
            'fontSize': 18
          },
          detail: {
            formatter: '{value}',
            offsetCenter: [0, '-22%'], // 设置值得位置，xy单位为px
            textStyle: { // 其余属性默认使用全局文本样式，详见TEXTSTYLE
              color: '#ffffff',
              fontWeight: 'bolder',
              fontFamily: '微软雅黑',
              'fontSize': 40
            }
          },
          data: [{value: this.aqi, name: 'AQI'}, {value: 40, name: 'other'}]
        }, {
          type: 'gauge',
          center: ['50%', '50%'], // 默认全局居中
          radius: '70%',
          startAngle: 230,
          endAngle: -50,
          axisLine: {
            show: true,
            lineStyle: { // 属性lineStyle控制线条样式
              shadowColor: 'rgba(0,0,0,0.4)',
              shadowBlur: 100,
              color: [[0.1, '#00e528'], [0.2, '#ffff00'], [0.3, '#ff7e00'], [0.4, '#ff0000'], [0.6, '#99004c'], [1, '#7e0023']],
              width: 15// 表盘宽度
            }
          },
          splitLine: { // 分割线样式（及10、20等长线样式）
            length: 30,
            lineStyle: { // 属性lineStyle控制线条样式
              width: 2
            },
            show: false
          },
          axisTick: { // 刻度线样式（及短线样式）
            length: 10
          },
          axisLabel: { // 文字样式（及“10”、“20”等文字样式）
            color: 'black',
            distance: 5, // 文字离表盘的距离
            show: false
          },
          detail: {
            formatter: '{score|{value}%}',
            offsetCenter: [0, '40%'],
            height: 15,
            rich: {
              score: {
                color: '#404c4f',
                fontFamily: '微软雅黑',
                fontSize: 14
              }
            },
            show: false
          }
        }
        ]
      }
    }
  }
</script>
<style>
  .echarts {
    width: 100%;
    height: 100%;
  }
</style>
